<template>
  <div style="height: 100vh" class="flex-column">
    <div class="tab-nav">
      <div v-for="tab in tabs" :key="tab.key" class="tab" :class="{
        active: storeState.settings.activeTab == tab.key,
      }">
        <div class="tab-title" @click="changeTab(tab.key)">
          <span>{{ tab.title }}</span>
        </div>
      </div>
    </div>
    <div class="main" style="margin-top: 20px">
      <div v-show="storeState.settings.activeTab == 'tcpClient'">
        <tcp-view />
      </div>
      <div v-show="storeState.settings.activeTab == 'tcpServer'">
        <tcp-server-view />
      </div>
      <div v-show="storeState.settings.activeTab == 'udp'">
        <udp-view />
      </div>
      <div v-show="storeState.settings.activeTab == 'serial'">
        <serial-view />
        <!-- <websocket-client-view /> -->
      </div>
      <div v-show="storeState.settings.activeTab == 'wsClient'">
        <websocket-client-view />
      </div>
    </div>
  </div>
</template>

<script setup>
import TcpView from "./views/TcpView.vue";
import UdpView from "./views/UdpView.vue";
import TcpServerView from "./views/TcpServerView.vue";
import SerialView from "./views/SerialView.vue";
import WebsocketClientView from "./views/WebsocketClientView.vue";
import { ref, reactive, computed } from "vue";
import store from './store';
import { storeGetSync } from './util/configStore';
import { ESTORE_KEY } from './constants/constants';

// must use storeState to listen state changing, it will not work if use `ref(store.state.settings.activeTab)`
const storeState = computed(() => store.state);

const tabs = reactive([
  {
    key: "tcpClient",
    title: "TCP Client",
    // icon: require("@/assets/icons/tabs/training_active.png"),
    // inactivateIcon: require("@/assets/icons/tabs/training.png"),
  },
  {
    key: "tcpServer",
    title: "TCP Server",
  },
  {
    key: "udp",
    title: "UDP",
  },
  {
    key: "serial",
    title: "串口",
  },
  {
    key: "wsClient",
    title: "WS Client",
  }
])
const changeTab = (key) => {
  // activeTab.value = key;
  store.commit("updateActiveTab", key);
};

// load setting from file
let setting = storeGetSync(ESTORE_KEY.SYSTEM_SETTING);
store.commit("updateSetting", setting);
</script>

<style lang="less" scoped>
.tab-nav {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  // border-top: 1px solid rgba(206, 224, 230, 0.04);
  // border-bottom: 1px solid #ddd;

  font-family: MicrosoftYaHei;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.6);
  line-height: 24px;
  font-weight: 400;

  .active {
    color: rgba(0, 0, 0, 0.8);
    font-weight: 700;
  }

}

.tab {
  background-color: white;
  flex: 1;
  height: 100%;
  color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 5px;
    bottom: 5px;
    width: 1px;
    background-color: #ccc;
  }

  &:first-child::before {
    content: "";
    background: none;
  }
}

.tab-title {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.title:hover {
  cursor: pointer;
}

.main {
  padding: 0;
  flex-grow: 1;
  padding: 20px;

  div {
    height: 100%;
  }
}
</style>
